<template>
    <div class="ui special cards">
        <div class="card" style="box-shadow: 2px 3px 6px #bababc;">
            <div class="blurring dimmable image">
                <div class="ui dimmer">
                    <div class="content">
                        <div class="center">
                            <div class="ui inverted button" id="qqq">加入书签</div>
                        </div>
                    </div>
                </div>
                <!--                <img :src="head">-->
                <img src="@/assets/img/tuanzi/e833b3fbd28a9f3a0201c255cee5b9db.jpeg">
            </div>
            <div class="content" style="margin-top: -35px;z-index:10;border:0 ">
                <a class="header">Rocco</a>
                <div class="meta">
                    <span class="date"></span>
                </div>
                <div class="description" style="font-size: small;opacity: .8;color: gray" v-show="aboutMe">
                    <strong> 博主 </strong> 由联合国常任理事国之中国 Minnan Normal University
                    毕业，曾任编程入门到放弃协会会长、贫困房东捐助协会副会长、而今致力于厦门、福州经济繁荣，
                    提升市民收入水平，所谓先天下，后小家，吾辈必殚精竭虑，提高GDP，不说了，去资助贫困的奶茶店了...
                </div>
            </div>
            <div class="extra content">
                <span class="right floated" style="cursor: pointer" @click="toggleAboutMe()">
                    About me
                </span>
                <span class="left floated">
                    Create in Feb 2020
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Postcard",

        data() {
            return {
                head: '',
                aboutMe: false
            }
        },
        created() {
            // this.getHead();
        },
        methods: {
            getHead() {
                this.req({
                    url: 'postCardHead',
                    method: 'POST'
                })
                    .then(res => {
                        this.head = res.data;
                    })
                    .catch(error => {
                        console.log('getHead() error:' + error)
                    })

            },
            toggleAboutMe() {
                this.aboutMe = !this.aboutMe;
            }
        },


    }

    $(function () {
        $('.special.cards .image').dimmer({
            on: 'hover'
        });
        $('#qqq').click(function () {
            alert('暂不支持该浏览器，请使用：Ctrl+D 快捷键新建书签。')
        })
    })


</script>

<style scoped>

</style>
